<template>
	<view class="page">
		<image src="/page_zixun/img/background.png" mode="" class="img_bg"></image>

		<view class="title">
			<image class="img" src="../img/title.png" mode="aspectFit"></image>
		</view>
		<view class="title2">
			<image src="../img/title2.png" mode="aspectFit"></image>
		</view>


		<view class="content">

			<view class="issue">
				<view class="question">
					<view class="img">
						<image src="../img/quest.png" mode="aspectFit" />
					</view>
					<view class="txt">发生无保护性行为后如何获取阻断药?</view>
				</view>
				<view class="click" @click="skip2">
					<view class="stick"></view>
					<view class="answer">点击获取</view>
				</view>
			</view>

			<view class="issue">
				<view class="question">
					<view class="img">
						<image src="../img/quest.png" mode="aspectFit" />
					</view>
					<view class="txt">是否需要暴露后预防?</view>
				</view>
				<view class="click">
					<view class="check">
						<uni-data-checkbox selectedColor="#1677FF" wrap mode="list" v-model="value" :localdata="range"
							@change="change"></uni-data-checkbox>
					</view>
				</view>
				<view class="tips">Tips: 暴露后72小时内尽早使用阻断药可减少艾滋病病毒感染的风险)</view>
			</view>

			<view class="issue">
				<view class="question">
					<view class="img">
						<image src="../img/quest.png" mode="aspectFit" />
					</view>
					<view class="txt">我是否需要做艾滋检测?</view>
				</view>
				<view class="tips">您可以通过风险评估来确定自己是否需要检测,是否自评?</view>
				<view class="click">
					<view class="check">
						<uni-data-checkbox selectedColor="#1677FF" wrap mode="list" v-model="value2" :localdata="range2"
							@change="change2"></uni-data-checkbox>
					</view>
				</view>
				<view class="tips">Tips: 艾滋病检测是及早发现感染者和病人的重要措施。男男同性性行为人群需要每六个月进行一次艾滋病检测,随时了解自己的健康状况。</view>
			</view>
		</view>

		<view class="kefu" @click="skip">
			<image src="../img/kefu.png" mode=""></image>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				value: '',
				range: [{
					"value": 0,
					"text": "A.需要"
				}, {
					"value": 1,
					"text": "B.不需要"
				}],
				value2: '',
				range2: [{
					"value": 0,
					"text": "A.需要"
				}, {
					"value": 1,
					"text": "B.不需要"
				}],
			}
		},
		onHide() {
			console.log('离开页面onHide');
		},
		onUnload() {
			console.log('离开页面onUnload返回上一页');
		},
		methods: {
			skip() {
				uni.navigateTo({
					url: '/page_zixun/kefu/kefu'
				})
			},
			skip2() {
				uni.showModal({
					title: '跳转',
					content: '即将跳转到暴露后预防模块,是否跳转?',
					success: function(res) {
						if (res.confirm) {
							uni.navigateTo({
								url: '/page_zixun/prevention/prevention'
							})
						} else if (res.cancel) {}
					}
				})
			},
			change(op) {
				
				console.log(op);
				if(op.detail.value == 0){
					uni.showModal({
						title: '跳转',
						content: '即将跳转到暴露后预防模块,是否跳转?',
						success: function(res) {
							if (res.confirm) {
								uni.navigateTo({
									url: '/page_zixun/prevention/prevention'
								})
							} else if (res.cancel) {}
						}
					})
				}
			},
			change2(op) {
				if(op.detail.value == 0){
					uni.showModal({
						title: '跳转',
						content: '即将跳转到风险评估模块,是否跳转?',
						success: function(res) {
							if (res.confirm) {
								uni.navigateTo({
									url: '/page_zixun/risk/risk'
								})
							} else if (res.cancel) {}
						}
					})
					
				}
			},
			skip3(){},
			skip4(){}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		// padding: 30rpx 0;
		position: relative;

		.img_bg {
			position: fixed;
			z-index: -1;
			left: 0;
			top: 0;
			width: 100%;
			height: 100vh;
		}

		.title {
			width: 562rpx;
			height: 124rpx;
			margin: 60rpx auto 0;

			.img {
				width: 100%;
				height: 100%;
			}
		}

		.title2 {
			width: 396rpx;
			height: 48rpx;
			margin: 30rpx auto 0;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.content {
			width: 75%;
			margin: 40rpx auto 0;
			border: 1px solid white;
			border-radius: 20rpx;
			padding: 35rpx;
			color: white;
			background-color: rgba(255, 255, 255, 0.2);

			.issue {
				margin-bottom: 20rpx;

				// height: 52rpx;
				.question {
					display: flex;
					align-items: center;

					.img {
						width: 44rpx;
						height: 52rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.txt {
						padding-left: 10rpx;
						// height: 52rpx;
						line-height: 52rpx;
						background: linear-gradient(to right, #1677FF, rgba(255, 255, 255, 0));
					}
				}

				.click {
					display: flex;
					margin-top: 20rpx;

					.stick {
						width: 2rpx;
						height: 70rpx;
						background-color: rgba(255, 255, 255, 0.3);
						margin-left: 20rpx;
					}

					.answer {
						margin-left: 40rpx;
						font-weight: 600;
						text-decoration: underline;
					}

					.check {
						border-left: 2rpx solid rgba(255, 255, 255, 0.3);
						line-height: 70rpx;
						margin-left: 20rpx;
						padding-left: 30rpx;
						font-weight: 600;
					}
				}

				.tips {
					font-size: 14px;
					color: #4d4d4d;
					margin-top: 20rpx;
					padding: 16rpx;
					border-radius: 10rpx;
					background-color: rgb(72, 143, 249, 0.4);
				}

			}
		}

		.kefu {
			position: fixed;
			right: 20rpx;
			top: 200rpx;
			width: 60rpx;
			height: 60rpx;
			background-color: rgba(255, 255, 255, 0.8);
			border-radius: 10rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}
</style>